<template>
  <div>
    <!--页头-->
    <el-row>
      <div class="div-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '' }">&#12288;&#12288;主页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>

    <!--数据表-->
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="kfb-icon-list-outline"></i>
          <span>用户列表</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleAdd()"
            icon="el-icon-circle-plus-outline"
          >用户添加</el-button>
        </div>
        <div class="block">
          <el-table
            :data="this.tableData.filter(data=>data.userName.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            ref="utable"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="user-table-expand">
                  <el-form-item label="用户名">
                    <span>{{ props.row.userName }}</span>
                  </el-form-item>

                  <el-form-item label="电话">
                    <span>{{ props.row.phone }}</span>
                  </el-form-item>

                  <el-form-item label="状态">
                    <span>{{ props.row.status === '0'? '启用':'禁用'}}</span>
                  </el-form-item>
                  <el-form-item label="所属部门">
                    <span>{{ props.row.dept }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="userName" show-overflow-tooltip></el-table-column>

            <el-table-column
              label="状态"
              prop="status"
              :formatter="(row)=> row.status ==='0'?'启用':'禁用'"
            ></el-table-column>
            <el-table-column label="所属部门" prop="dept" show-overflow-tooltip></el-table-column>
            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </el-row>

    <!--添加用户对话框-->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="dialogClose"
      :close-on-click-modal="false"
      :inline="true"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="right"
          :rules="rules"
          :inline="true"
        >
          <el-form-item label="用户名" prop="userName" size="small">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passWord" size="small">
            <el-input type="password" v-model="form.passWord" size="small"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="conformPassWord" size="small">
            <el-input type="password" v-model="form.conformPassWord" size="small"></el-input>
          </el-form-item>
          <el-form-item label="用户状态" size="small">
            <el-select v-model="form.status">
              <el-option label="启用" value="0"></el-option>
              <el-option label="禁用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" size="small"></el-input>
          </el-form-item>

          <el-form-item label="所属部门" size="small">
            <el-cascader
              expand-trigger="hover"
              :options="deptData"
              v-model="deptValue"
              @change="selectionChange"
              :props="props"
              change-on-select
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('form')" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { add, remove, update, list } from "@/api/yxwh/xxwh";
import { listDept } from "@/api/yxwh/bmgl";
import Clone from "@/utils/clone"; //克隆类
export default {
  name: "index",
  data() {
    return {
      tableData: [], //获取的用户信息集合
      deptData: [], //获取的组织机构集合
      form: {}, //添加用户关联的用户表单
      rules: {
        //用户表单定义的填写规则
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
        dept: [{ required: true, message: "请选择组织机构", trigger: "change" }]
      },
      search: "", //查询用户输入的关键字
      dialogVisible: false, //添加用户对话框可见控制
      add: true, //判断是编辑用户还是添加用户
      total: 0, //用户所有条数
      currentPage: 1, //显示的用户当前页
      pageSize: 10, //当前页显示条数
      props: { value: "flag", label: "name" }, //组织机构显示的关联字段
      deptValue: []
    };
  },
  methods: {
    //编辑用户
    handleEdit(index, row) {
      this.form = Clone.clone(row);
      this.dialogVisible = true;
      this.add = false;
      this.index = this.pageSize * (this.currentPage - 1) + index;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
      this.getDeptData();
    },
    //删除用户
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove(row).then(res => {
            this.tableData.splice(
              this.pageSize * (this.currentPage - 1) + index,
              1
            );
            this.total = this.tableData.length;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //用户对话框关闭
    dialogClose(done) {
      done();
    },
    //添加编辑用户时验证
    handleConfirm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.add) {
            add(this.form).then(res => {
              this.tableData.push(res.data);
              this.total = this.tableData.length;
              this.dialogVisible = false;
            });
          } else {
            update(this.form).then(res => {
              Clone.copy(this.form, this.tableData[this.index]);
              this.dialogVisible = false;
            });
          }
        } else {
          this.$message.error("数据校验未通过，请重新输入");
          return false;
        }
      });
    },
    //启动添加用户
    handleAdd() {
      this.dialogVisible = true;
      this.add = true;
      this.form = {
        userName: "",
        passWord: "",
        conformPassword: "",
        status: "0",
        phone: "",
        pid: this.$store.getters.id
      };
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
      this.getDeptData();
    },

    //翻页条数控制
    handleSizeChange(size) {
      this.pageSize = size;
    },
    //翻页控制
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    //获取所有用户信息
    getData() {
      list({ dist: this.$store.getters.dept }).then(res => {
        this.tableData = res.data.filter(
          item => item.dept !== this.$store.getters.dept
        );
        this.total = this.tableData.length;
      });
    },
    //获取所有组织结构信息
    getDeptData() {
      if (this.deptData.length === 0) {
        listDept({ dist: this.$store.getters.dept }).then(res => {
          let data = res.data;
          if (data.length > 0) {
            data = data[0].name === "ROOT" ? data[0].children : data;
          }
          const a = array => {
            array.forEach(item => {
              if (item.children) {
                if (item.children.length === 0) {
                  delete item.children;
                } else {
                  a(item.children);
                }
              }
            });
          };
          a(data);
          this.deptData = data;
        });
      }
    },
    //选择赋值组织机构s
    selectionChange(value) {
      //TODO  这里很关键，意味这以后数据的查询是否可以进行路由匹配
      this.form.dept = value[value.length - 1];
    }
  },
  mounted: function() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.div-breadcrumb {
  border-radius: 4px;
  min-height: 48px;
  background: #99a9bf;
  display: flex;
  align-items: center;
  font-size: 24px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.u-organizationDlg .el-scrollbar {
  height: 200px;
  overflow-x: hidden;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.u-organizationDlg .el-scrollbar {
  height: 200px;
  overflow-x: hidden;
}

.user-table-expand {
  font-size: 0;
}

.user-table-expand label {
  width: 90px;
  color: #313bbf;
}

.user-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-form-item span {
  float: right;
}
</style>
